<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td{
            width: 100px;
        }
        div#updateDiv span{
            margin-right: 80px;
        }
    </style>
    <script src="/static/js/jquery-3.2.1.min.js"></script>
     <script>
         $(document).ready(function () {

             /*根据id重启*/
             $("#one").click(function () {
                 if ($("#id").val()==""){
                     alert("id不能为空");
                 }else{
                     $.get("/refresh/"+$("#id").val(),function(data,status){
                         alert(data);
                     });
                 }

             });
             /*重启全部*/
             $("#all").click(function () {
                 $.get("/refresh/all",function(data,status){
                     alert(data);
                 });
             });
             /*查询*/
             /*全局变量*/
             var $pageNum=1,$pageSize=1,$pages=99;
             function search() {

                 var $id=$("#findId").val(),$name=$("#findName").val(),$group=$("#findGroup").val(),$status=$("#findStatus").val();
                 /*主体*/
                 $.post("/findByCriteria",{pageNum:$pageNum,pageSize:$pageSize,id:$id,name:$name,group:$group,status:$status},
                     function (data) {
                        $pages=data.pages;
                         var $data = data;
                         var list = data.list;
                         console.log(data)

                         //每次进来先清空
                         $("#tr1").siblings().remove();
                         $.each(list,function(index,data) {
                             $("<tr id=tr"+index+">" +
                                 "<td>"+data.id+"</td>"+
                                 "<td>"+data.name+"</td>"+
                                 "<td>"+data.group+"</td>"+
                                 "<td>"+data.cron+"</td>"+
                                 "<td>"+data.parameter+"</td>"+
                                 "<td>"+data.description+"</td>"+
                                 "<td>"+data.vmParam+"</td>"+
                                 "<td>"+data.jarPath+"</td>"+
                                 "<td>"+data.status+"</td>"+
                                 '<td><a href="#" class="delete" id='+data.id+'>DELETE</a></td>'+
                                 '<td><a href="#" class="update" id='+data.id+' >UPDATE</a></td>'+
                                 "</tr>").appendTo($("#findTable"));
                         });
                         return $data;
                     });
             }
             /*findButton*/
             $("#findButton").click(function () {
                 /*初始化起始页面*/
                 $pageNum=1;
                 search();
                 $("#updateDiv,#insertDiv").hide();
             });
             //分页点击事件
             $("#prePage").click(function(){

                 $("#updateDiv,#insertDiv").hide();
                 $pageNum==1?1:$pageNum--;
                 search();

             });
             $("#nextPage").click(function(){
                 $("#updateDiv,#insertDiv").hide();
                 $pageNum==$pages?$pages:$pageNum++;

                 search();
             });

             /*加载GROUP*/
             function findGroups() {
                 $.post("/findGroups",function (data,status) {
                     console.log(data);
                     $.each(data,function (index,data) {
                         $("<option value="+data+">"+data+"</option>").appendTo($("#findGroup"));
                     });
                     return data;
                 });
             }
             /*load status*/
             function findStatus() {
                 $.post("/findStatus",function (data,status) {
                     console.log(data);
                     $.each(data,function (index,data) {
                         $("<option value="+data+">"+data+"</option>").appendTo($("#findStatus"));
                     });
                     return data;
                 });
             }
             /*delete*/
             $("table#findTable").on("click","a.delete",function(){
                 var $id = $(this).attr("id");
                 var $flag=confirm("是否确认删除");
                 if ($flag){
                     $.post("/deleteById/"+$id,function (data) {
                         if (data==1){
                             alert("DELETE SUCCESS");
                             window.location.href="/";
                         }else {
                             alert("DELETE ERROR");
                         }
                     });
                 }
             });
             /*update*/
             $("table#findTable").on("click","a.update",function(){
                 /*加载status*/
                 $("#ustatus").children().remove();
                 $.post("/findStatus",function (data) {
                     $.each(data,function (index,data) {
                         $("<option value="+data+">"+data+"</option>").appendTo($("#ustatus"));
                     });
                 });
                 /*load cron*/
                 $("#ucron").children().remove();
                 $.post("/findCrons",function (data) {
                     $.each(data,function (index,data) {
                         //alert("oo:"+data.cron);
                         $("<option value='"+data.cron+"'>"+data.name+"</option>").appendTo($("#ucron"));
                     });
                 });

                 $("#insertDiv").hide();
                 $("#updateDiv").show();
                 var id = $(this).attr("id");
                 $.post("/findById",{id:id},function (data) {
                     console.log(data);
                     var list = data;
                     $.each(list,function (index,data) {
                         $("#uid").val(data.id);
                         $("#uname").val(data.name);
                         $("#ugroup").val(data.group);
                         //alert("tt:"+data.cron);
                         $("#ucron").val(data.cron);
                         $("#uparameter").val(data.parameter);
                         $("#udescription").val(data.description);
                         $("#uvmParam").val(data.vmParam);
                         $("#ujarPath").val(data.jarPath);
                         $("#ujarPath_file").accpet=data.jarPath;
                         $("#ustatus").val(data.status);

                     });
                 });
                 /*加载Crons*/

             });
             $("#updateSubmit").click(function () {
                 /*/!*设置jarPath的值，只取值*!/
                 var jarPath_file = $("#ujarPath_file").val();

                 if (jarPath_file != ""){

                     $("#ujarPath").val(jarPath_file);
                 }*/
                 var form=$("#updateForm"),formData=new FormData(form);
                 formData.append("id", $("#uid").val());
                 formData.append("name", $("#uname").val());
                 formData.append("group", $("#ugroup").val());
                 formData.append("cron", $("#ucron").val());
                 formData.append("parameter", $("#uparameter").val());
                 formData.append("description", $("#udescription").val());
                 formData.append("vmParam", $("#uvmParam").val());
                 formData.append("jarPath", $("#ujarPath").val());
                 formData.append("status", $("#ustatus").val());
                 formData.append("jarPath_file", $("#ujarPath_file")[0].files[0]);
                 $.ajax({
                     url:'/updateById',
                     type:'POST',
                     data:formData,
                     processData:false,
                     contentType:false,
                     success:function(data){
                         alert(data);
                         if (data=="UPDATE SUCCESS")
                            window.location.href="/";
                     }
                 });
               /*$.post("/updateById",$("#updateForm").serialize(),function (data,status) {

                     console.log(data);
                     if(data==1){
                         alert("UPDATE SUCCESS");
                         window.location.href="/";
                     }else {
                         alert("UPDATE ERROR");
                     }
                 });*/
             });
             /*insert*/
             $("#add").click(function () {
                 $("#updateDiv").hide();
                 $("#insertDiv").show();
                 /*load status*/
                 $.post("/findStatus",function (data) {
                     $.each(data,function (index,data) {
                         $("<option value="+data+">"+data+"</option>").appendTo($("#istatus"));
                     });
                 });

                 /*load cron*/
                 $("#icron").children().remove();
                 $.post("/findCrons",function (data) {
                     $.each(data,function (index,data) {
                         //alert("oo:"+data.cron);
                         $("<option value='"+data.cron+"'>"+data.name+"</option>").appendTo($("#icron"));
                     });
                 });

             });
             $("#addSubmit").click(function () {
                /* /!*设置jarPath的值，只取值*!/
                 $("#ijarPath").val($("#ijarPath_file").val());
                 console.log("jarPath:"+$("#ijarPath_file").val());*/
                if (isNaN($("#iid").val())){
                    alert("ID必须为数字");
                    return;
                }
                 var form=$("#insertForm"),formData=new FormData(form);
                 formData.append("id", $("#iid").val());
                 formData.append("name", $("#iname").val());
                 formData.append("group", $("#igroup").val());
                 formData.append("cron", $("#icron").val());
                 formData.append("parameter", $("#iparameter").val());
                 formData.append("description", $("#idescription").val());
                 formData.append("vmParam", $("#ivmParam").val());
                 formData.append("jarPath", $("#ijarPath").val());
                 formData.append("status", $("#istatus").val());
                 formData.append("jarPath_file", $("#ijarPath_file")[0].files[0]);
                 $.ajax({
                     url:'/add',
                     type:'POST',
                     data:formData,
                     processData:false,
                     contentType:false,
                     success:function(data){
                         alert(data);
                         if(data=="ADD SUCCESS")
                             window.location.href="/";
                     },
                     error:function (XMLHttpRequest, textStatus, errorThrown) {
                         alert("未知错误");

                     }
                 });
             });
             /*默认加载*/
             /*隐藏更新和插入div*/
             $("#updateDiv,#insertDiv").hide();
             search();
             findGroups();
             findStatus();
             $("#ttt").click(function () {
                 alert($("#ucron").val());
             });
             /*结尾*/
         });
     </script>
</head>
<body>
    <!--restart-->
    <div id="restart">
        <table id="restartTable">
            <tr>
                <td style="width: 10px">ID:</td>
                <td><input type="text" id="id"></td>
                <td><input type="submit" id="one" value="重启"></td>
                <td style="width: 110px"><input type="submit" id="all" value="重启全部"></td>
                <td><input type="button" id="add" value="新增"></td>
            </tr>
        </table>
        <p></p>
    </div>

    <!--main-->
    <div id="main">
        <table id="searchTable">
            <tr>
                <td style="width: 10px;"> ID:</td>
                <td><input type="text" id="findId"></td>
                <td style="width: 10px;"> NAME:</td>
                <td><input type="text" id="findName"></td>
                <td style="width: 10px;"> GROUP:</td>
                <td> <select id="findGroup"><option value="" selected="selected">--please select--</option></select></td>
                <td style="width: 10px;"> STATUS:</td>
                <td><select id="findStatus"><option value="" selected="selected">--please select--</option></select></td>
                <td><input type="button" value="查询" id="findButton"></td>
                <td></td>
            </tr>
        </table>
        <p></p>
        <table id="findTable" border="1" >
            <tr id="tr1">
                <td>ID</td>
                <td>NAME</td>
                <td>GROUP</td>
                <td>CRON</td>
                <td>PARAMETER</td>
                <td>DESCIPITION</td>
                <td>VM_PARAM</td>
                <td>JAR_PATH</td>
                <td>STATUS</td>
                <td>DELETE</td>
                <td>UPDATE</td>
            </tr>
        </table>
        <p id="page">
            <input type="button" value="上一页" id="prePage">&nbsp;&nbsp;&nbsp;
            <input type="button" value="下一页" id="nextPage">
        </p>
    </div>
    <!--update-->

    <div id="updateDiv">
        <form id="updateForm">
            <table border="1" id="updateTable">
                <tr>
                    <td>ID:</td>
                    <td><input type="text" readonly="readonly" name="id" id="uid"></td>
                </tr>
                <tr>
                    <td>NAME:</td>
                    <td><input type="text" name="name" id="uname"></td>
                </tr>
                <tr>
                    <td>GROUP:</td>
                    <td><input type="text" name="group" id="ugroup"></td>
                </tr>
                <tr>
                    <td>CRON:</td>
                    <td><select name="cron" id="ucron"></select><!--<input type="button" id="ttt" value="value">--></td>
                </tr>
                <tr>
                    <td>PARAMETER:</td>
                    <td><input type="text" name="parameter" id="uparameter"></td>
                </tr>
                <tr>
                    <td>DESCRIPTION:</td>
                    <td><input type="text" name="description" id="udescription"></td>
                </tr>
                <tr>
                    <td>VM_PARAM:</td>
                    <td><input type="text" name="vmParam" id="uvmParam"></td>
                </tr>
                <tr>
                    <td>JAR_PATH:</td>
                    <td><input type="file"  name="jarPath_file" id="ujarPath_file"></td>
                </tr>
                <tr>
                    <td>原文件：</td>
                    <td><input type="text" readonly="readonly" name="jarPath" id="ujarPath"></td>
                </tr>
                <tr>
                    <td>STATUS:</td>
                    <td><select name="status" id="ustatus"></select></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="UPDATE" id="updateSubmit"></td>
                </tr>
            </table>
        </form>
    </div>

    <!--insert-->
    <div id="insertDiv">
        <form id="insertForm" enctype="multipart/form-data" method="post">
            <table border="1">
                <tr>
                    <td>ID:</td>
                    <td><input type="text"  name="id" id="iid" placeholder="可选"></td>
                </tr>
                <tr>
                    <td>NAME:</td>
                    <td><input type="text" name="name" id="iname" placeholder="必填"></td>
                </tr>
                <tr>
                    <td>GROUP:</td>
                    <td><input type="text" name="group" id="igroup" placeholder="必填"></td>
                </tr>
                <tr>
                    <td>CRON:</td>
                    <td><select name="cron" id="icron" ></select></td>
                </tr>
                <tr>
                    <td>PARAMETER:</td>
                    <td><input type="text" name="parameter" id="iparameter" placeholder="必填"></td>
                </tr>
                <tr>
                    <td>DESCRIPTION:</td>
                    <td><input type="text" name="description" id="idescription" placeholder="可选"></td>
                </tr>
                <tr>
                    <td>VM_PARAM:</td>
                    <td><input type="text" name="vmParam" id="ivmParam" placeholder="必填"></td>
                </tr>
                <tr>
                    <td>JAR_PATH:</td>
                    <td><input type="file" name="jarPath_file" id="ijarPath_file"><input type="hidden" name="jarPath" id="ijarPath"></td>
                </tr>
                <tr>
                    <td>STATUS:</td>
                    <td><select name="status" id="istatus" ></select></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="INSERT" id="addSubmit"></td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>